<template>

    <div class="customer_list_container">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>系统设置</el-breadcrumb-item>
            <el-breadcrumb-item>客服管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="customer_list_card">

            <!-- title -->
            <el-row class="title font18">
                <el-col>客服列表</el-col>
            </el-row>

            <!-- 主体内容 -->
            <div class="customer_list_content">

                <el-row :gutter="20">
                    <el-col :span='6'>
                        <el-input placeholder="请输入内容（昵称、手机号）" v-model="name" size="medium"></el-input>
                    </el-col>

                    <el-col :span="2">
                        <el-button type="primary" style="padding: 9px 25px;" size="medium" plain @click="searchList">筛选</el-button>
                    </el-col>
                </el-row>

                <!-- 表格 -->
                <el-table class="customer_list_table" :data="tableData.slice((page-1)*limit,page*limit)" style="width: 100%" border>
                    <el-table-column prop="userName" label="客服账号">
                    </el-table-column>

                    <el-table-column prop="staffId" label="客服编号">
                    </el-table-column>

                    <el-table-column prop="username" label="客服姓名">
                    </el-table-column>

                    <el-table-column prop="company" label="所属供应商">
                    </el-table-column>

                    <el-table-column prop="create_time" label="添加时间">
                    </el-table-column>

                    <el-table-column prop="date" label="状态">
                        <div class="status" slot-scope="scope">
                            <el-switch v-model="scope.row.status" disabled>
                            </el-switch>
                        </div>
                    </el-table-column>

                    <!--<el-table-column label="操作">-->
                        <!--<div class="edit_box" slot-scope="scope">-->
                            <!--<span class="edit">修改</span>-->
                            <!--<span class="del">停用</span>-->
                        <!--</div>-->
                    <!--</el-table-column>-->
                </el-table>
            </div>

            <!-- 分页器 -->
            <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="limit"
                           layout="total, prev, pager, next" :total="count">
            </el-pagination>
        </el-card>
    </div>
</template>

<script src='../../../static/js/customer/customer_list.js'></script>

<style scoped>
    @import "../../../static/css/customer/customer.css";
</style>


